<template>
	<div id="udetail-box">
		<div class="tou-box">
			<div class="user-tou">
				<img src="../../../public/img/lunbotu06.jpg"/>
			</div>
			<p>{{woshizhuzhu}}</p>
		</div>
		<div id="detail-box">
			<div>
				<span class="det-one iconfont icon-shoucang1"></span>
				<span class="det-two">{{shoucang}}</span>
				<span class="det-three iconfont icon-arr-right1"></span>
			</div>
			<div>
				<span class="det-one iconfont icon-che101"></span>
				<span class="det-two">{{spingkar}}</span>
				<span class="det-three iconfont icon-arr-right1"></span>
			</div>
			<div>
				<span class="det-one iconfont icon-hongbao1"></span>
				<span class="det-two">{{hongka}}</span>
				<span class="det-filt">2</span>
				<span class="det-three iconfont icon-arr-right1"></span>
			</div>
		</div>
		<div id="kefu-box">
			<div>
				<span class="det-one iconfont icon-kefu"></span>
				<span class="det-two">{{mykefu}}</span>
				<span class="det-three iconfont icon-arr-right1"></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'udetail',
		data(){
			return {
				woshizhuzhu: '我是猪猪',
				shoucang: '收藏',
				hongka: '红包卡',
				mykefu: '我的客服',
				spingkar: '购物车'
			}
		}
	}
</script>

<style>
	.tou-box{width: 100%;height: 100px;position: relative;padding:20px;}
	#udetail-box p{font-size: 20px;position: absolute;top: 36px;left: 100px;}
	#udetail-box .user-tou{width: 60px;height: 60px;border-radius: 50%;overflow: hidden;}
	.user-tou img{width: 60px;height: 60px;}
	
	#detail-box{width: 94%;height: 150px;background: white;margin-left: 3%;border-radius: 5px;}
	#detail-box div{width: 100%;height: 50px;display: flex;align-items: center;}
	#detail-box .det-one{font-size: 28px;color: #F6BD04;margin-left: 10px;}
	#detail-box .det-two{font-size: 14px;margin-left: 20px;}
	#detail-box .det-three{font-size: 16px;position: absolute;right: 30px; opacity: 0.2;}
	#detail-box .det-filt{font-size: 16px;color: red;position: absolute;right: 60px}
	
	#kefu-box{width: 94%;height: 50px;line-height: 50px;background: white;
	margin-left: 3%;border-radius: 5px;margin-top: 10px;}
	#kefu-box .det-one{font-size: 28px;color: #F6BD04;margin-left: 10px;}
	#kefu-box .det-two{font-size: 14px;margin-left: 20px;}
	#kefu-box .det-three{font-size: 16px;position: absolute;right: 30px; opacity: 0.2;}
</style>